<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>使用vue开发简单页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row" style="margin-top: 70px;">
            <div class="col-md-10 col-md-offset-1">
                <ul class="nav nav-pills nav-justified">
                    <li role="presentation" :class="showActive == 'home'? 'active':''"><a href="#/home" @click="changeActive('home')">主页</a></li>
                    <li role="presentation" :class="showActive == 'user'? 'active':''"><a href="#/user" @click="changeActive('user')">用户管理</a></li>
                    <li role="presentation" :class="showActive == 'student'? 'active':''"><a href="#/student" @click="changeActive('student')">学生管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
<template id="home">
    <div>
        <div class="jumbotron" style="margin-top: 100px">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style
                component for calling extra attention
                to featured content or information.
            </p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</template>
<template id="user">
    <div>
        <!--            用户信息展示-->
        <table class="table table-strip">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>电话</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <tbody>
            <tr v-for="(user,index) in users" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>{{ user.clazz }}</td>
                <td>{{ user.tel }}</td>
                <td>{{ user.password }}</td>
                <td><button class="btn btn-danger" @click="deletebyid(user.id)" >删除</button>&nbsp;&nbsp;<button class="btn btn-primary" >修改</button>&nbsp;&nbsp;<button class="btn btn-success" >添加</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<template id="student">
    <div>
        <!--            用户信息展示-->
        <table class="table table-strip">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>电话</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>20</td>
                    <td>软工1702</td>
                    <td>13456789012</td>
                    <td>123456</td>
                    <td><button class="btn btn-danger" >删除</button>&nbsp;&nbsp;<button class="btn btn-primary" >修改</button>&nbsp;&nbsp;<button class="btn btn-success" >添加</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.4.9/dist/vue-router.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script>
    //1.主页组件配置对象
    const home = {
        template:'#home'
    }
    //2.用户管理组件配置对象
    const user = {
        template:'#user',
        data() {
            return {
                users:[],
            };
        },
        methods: {
            //查询所有用户信息的函数
            findAll(){
                let _this = this
                //发送GET方式请求
                axios.get("http://localhost:8080/student/select/all")
                    .then((res) => {
                        console.log(res.data);
                        _this.users = res.data.data;
                    })
                    .catch((error) => {
                        console.log(error.data);
                        _this.users = error.data.data;
                    })
            },
            editStuBtn() {
                let _this = this;
                axios.patch("http://localhost:8080/student/edit",_this.user)
                .then(function (response){
                    console.log(response.data);
                })
                .catch(function (error){
                    console.log(error);
                })
            },
            deletebyid(id) {
                let _this = this;
                axios.delete("http://localhost:8080/student/delete", {
                    params:{
                        'id':id
                    }
                })
                    .then(function (response){
                        console.log(response.data);
                        _this.findAll();
                    })
                    .catch(function (error){
                        console.log(error);
                    })
            },
        },
        created() {
            this.findAll();
        }
    }
    //3.学生管理组件的配置对象
    const student = {
        template:'#student'
    }

    //使用路由
    const router = new VueRouter({
        routes:[
            {
                path:'/',
                redirect:'/home',
            },
            {
                path:'/home',
                component:home,
            },
            {
                path:'/user',
                component:user,
            },
            {
                path:'/student',
                component:student,
            },
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            showActive:'home'
        },
        methods: {
            changeActive(value) {
                this.showActive = value;
            }
        },
        //注册路由
        router,
    });
</script>
</html>
